<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>注册</title>
    <link rel="stylesheet" href="${ctx}/static/plug/frozenui-1.3.0/css/frozen.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/user/register.css" media="all">
</head>
<body ontouchstart="">
<section class="ui-container">
    <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start">
        <div class="ui-border">
            <img src="${ctx}/static/image/user/register_banner.webp" width="100%">
        </div>
        <div style="width:100%">
            <form id="dataForm">
                <input type="hidden" id="appId" value="${appId}"/>
                <input type="hidden" id="openId" value="${openId}"/>
                <input type="hidden" id="name" value="${name}"/>
                <input type="hidden" id="image" value="${image}"/>
                <div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start content" style="margin:0 auto;">
                    <div>
                        <p class="title" id="pTips">首次使用前需要验证手机号码</p>
                    </div>
                    <div class="register-input">
                        <input value="" type="tel" placeholder="输入手机号码" maxlength="11" id="phone"/>
                        <button type="button" class="ui-btn"
                                style="margin-left: 5px; color: #5d5d5d;float: right;width: 35%" id="getValidCodeBtn">
                            获取验证码
                        </button>
                    </div>
                    <div class="register-input">
                        <input value="" type="tel" placeholder="输入短信验证码" maxlength="6" id="validCode"/>
                    </div>
                    <div>
                        <p class="error" id="showMsgP"></p>
                    </div>
                    <div style="padding-top: 30px;">
                        <button type="button" class="ui-btn ui-btn-primary" style="width: 100%; height: 40px"
                                id="bindPhoneBtn">绑定手机号码
                        </button>
                    </div>
                    <div style="text-align: center;">
                        <p class="title" style="font-size: 12px">
                            点击绑定，即表示已阅读并同意<font color="#0baae4"><a href="${ctx}/userRule.jsp">《慧泊客服务条款》</a></font>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>
</body>
<script src="${ctx}/static/plug/frozenui-1.3.0/lib/zepto.min.js"></script>
<script src="${ctx}/static/plug/frozenui-1.3.0/js/frozen.js"></script>
<script>

    var paramObj = {
        "verifyNoParams": "${verifyNoParams}",
        "regParams": "${regParams}",
        "userInfoParams": "${userInfoParams}",
        "addCarNoParams": "${addCarNoParams}"
    };


    function invokeSettime(obj) {
        var countdown = 60;
        setTime(obj);
        function setTime(obj) {
            if (countdown == 0) {
                $(obj).attr("disabled", false);
                $(obj).text("获取验证码");
                countdown = 60;
                return;
            } else {
                $(obj).attr("disabled", true);
                $(obj).text("(" + countdown + ")秒");
                countdown--;
            }
            setTimeout(function () {
                    setTime(obj)
                }
                , 1000)
        }
    }

    $(function () {
        var userId = "${userId}";
        if (userId) {
            $("title").html("手机验证");
            $("#pTips").html("验证手机号码");
        }
        var jsonWechatUser = '${jsonWechatUser}';
        console.log(jsonWechatUser);
        var jsonUser = "";
        var name = "";
        var image = "";
        if (jsonWechatUser) {
            jsonUser = jQuery.parseJSON(jsonWechatUser);
            name = jsonUser.nickname;
            image = jsonUser.headimgurl;
        }


        $("#getValidCodeBtn").click(function () {
            var paraObj = {
                "phoneNo": $("#phone").val(),
                "params": paramObj.verifyNoParams
            };
            if (!$("#phone").val()) {
                showTips("warn", "请输入您的手机号码");
                return;
            }
            if (!isPhoneNo($("#phone").val())) {
                showTips("warn", "请输入正确的手机号码");
                return;
            }

            $.post("${action}", paraObj, function (obj) {
                console.log(obj);
                if (obj) {
                    showTips("warn", obj);
                    return;
                } else {
                    invokeSettime("#getValidCodeBtn");
                }
            });

        });

        var canSubmit = true;
        $("#bindPhoneBtn").click(function () {

            var appId = $("#appId").val();
            var openId = $("#openId").val();
            var validCode = $("#validCode").val();
            var phone = $("#phone").val();

            if (!$("#phone").val()) {
                showTips("warn", "请输入您的手机号码");
                return;
            }
            if (!isPhoneNo($("#phone").val())) {
                showTips("warn", "请输入正确的手机号码");
                return;
            }

            var paraObj = {
                "userId": userId,
                "appId": appId,
                "openId": openId,
                "verifyNo": validCode,
                "userId": userId,
                "phoneNo": phone,
                "name": name,
                "image": image,
                "params": paramObj.regParams
            };

            if (canSubmit) {
                canSubmit = false;
                console.log("start register....");
                $.post("${action}", paraObj, function (obj) {
                    if (obj.result) {
                        showTips("info", "绑定成功");
                        var hrefUrl = "${action}?params=" + paramObj.addCarNoParams;
                        if (userId) {
                            hrefUrl = "${action}?params=" + paramObj.userInfoParams;
                        } else {
                            hrefUrl += "&remark=firstRegister";
                        }
                        window.location.href = hrefUrl;
                    } else {
                        $("#showMsgP").html("验证码错误，请重新输入");
                    }
                    canSubmit = true;
                });
            }


        });


    });
</script>
</html>